<!-- 客户详情 跟进 -->
<template>
  <div class="follow-up-wrap flx-justify-between">
    <el-scrollbar class="follow-list">
      <div class="follow-item" v-for="(item, index) in resData" :key="index">
        <div class="left-step">
          <div class="dot"></div>
          <div class="line"></div>
        </div>
        <div class="follow-content">
          <div class="time text-grey">2024-04-06 20:14</div>
          <ul>
            <li>
              <div class="label text-grey">跟进内容：</div>
              <div class="value">客户对产品意向很高，但是希望价格能有优惠，目前已告知客户本月优惠活动，待客户考虑</div>
            </li>
            <li>
              <div class="label text-grey">跟进方式：</div>
              <div class="value">电话</div>
            </li>
            <li>
              <div class="label text-grey">客户级别：</div>
              <div class="value">A1-跟进中</div>
            </li>
            <li>
              <div class="label text-grey">下次跟进：</div>
              <div class="value">2024-04-17 03:27</div>
            </li>
            <li>
              <div class="label text-grey">跟进附件：</div>
              <div class="value">
                <div class="img-list">
                  <el-image
                    src="https://zhengqi-1301372220.cos.ap-beijing.myqcloud.com/upload/org_9/org_personal/20240814/66bc72f2ad36234955.png"
                    :preview-src-list="[
                      'https://zhengqi-1301372220.cos.ap-beijing.myqcloud.com/upload/org_9/org_personal/20240814/66bc72f2ad36234955.png'
                    ]"
                    :initial-index="4"
                    fit="cover"
                  />
                </div>
                <div class="file">
                  <el-link type="primary">聊天跟进记录.pdf</el-link>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <el-empty v-if="!resData.length" description="暂无客户跟进信息"></el-empty>
    </el-scrollbar>
    <div class="follow-add">
      <div class="add-title">新增跟进信息</div>
      <div class="add-content">
        <el-input class="input-textarea" type="textarea" placeholder="请输入跟进内容"></el-input>
      </div>

      <el-form ref="ruleFormRef" label-position="top" require-asterisk-position="right" :inline="true" class="form-inline-wrap">
        <el-form-item label="跟进方式" class="w-100">
          <el-select v-model="formParams.type" placeholder="请选择跟进方式" clearable>
            <el-option v-for="item in [{ label: 1, value: 1 }]" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="客户级别" class="w-100">
          <el-select v-model="formParams.level" placeholder="请选择客户级别" clearable>
            <el-option v-for="item in [{ label: 1, value: 1 }]" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="下次跟进时间" class="w-100">
          <el-date-picker
            v-model="formParams.lastTime"
            type="date"
            placeholder="请选择下次跟进时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="上传图片或附件" class="w-100">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :limit="10"
            @on-change="uploadChange"
          >
            <el-button plain icon="plus" type="primary">上传</el-button>
            <template #tip>
              <div class="el-upload__tip">选择jpg/png/pdf/word等文件格式,大小≤2M</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="footer-btn flx-justify-end">
        <el-button>重置</el-button>
        <el-button type="primary">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const fileList = ref([]);
const formParams = ref({});
const resData = ref([{}, {}]);

// 上传
const uploadChange = (e, a) => {
  console.log(e, a);
};
</script>

<style lang="scss" scoped>
.follow-up-wrap {
  height: 100%;
}
.follow-list {
  flex: 1;

  .follow-item {
    margin-bottom: 8px;
    display: flex;
    position: relative;

    .left-step {
      height: 100%;
      margin-right: 4px;
      .dot {
        width: 9px;
        height: 9px;
        background: #3370ff;
        border-radius: 50%;
      }
      .line {
        position: absolute;
        width: 1px;
        height: 100%;
        background: #d9d9d9;
        left: 4px;
      }
    }

    .follow-content {
      margin-left: 4px;

      .time {
        line-height: 22px;
      }

      li {
        line-height: 22px;
        padding-top: 4px;
        display: flex;
      }
    }
  }
}
.follow-add {
  width: 280px;
  height: 100%;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;

  .add-title {
    line-height: 48px;
    background: #f5f7fa;
    color: #1d2129;
    padding-left: 12px;
  }

  .add-content {
    flex: 1;
    padding: 12px;

    .el-textarea {
      height: 100%;
    }
    :deep(.el-textarea__inner) {
      height: 100%;
      outline: none;
      border: none;
      resize: none;
      box-shadow: none;
      background: #fff;
    }
  }
  .footer-btn {
    padding: 0 12px 12px 0;
  }

  .w-100 {
    padding: 0 12px;
  }
}
</style>
